import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() => runApp(MyApp());

/*
Transform可以在其子Widget绘制时对其应用一个矩阵变换（transformation），
Matrix4是一个4D矩阵，通过它我们可以实现各种矩阵操作
*/

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text('变换Transform'),
            backgroundColor: Colors.orange,
          ),
          body: new Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              new Padding(
                // 变换
                padding: EdgeInsets.only(left: 20, top: 100),
                child: new Container(
                  color: Colors.black,
                  child: new Transform(
                    alignment: Alignment.topRight, // 相对于坐标系原点的对齐方式
                    transform: new Matrix4.skewY(0.3), // 沿Y轴倾斜0.3弧度
                    child: new Container(
                      padding: EdgeInsets.all(8),
                      color: Colors.deepOrange,
                      child: new Text('Apartment for rent!'),
                    ),
                  ),
                ),
              ),
              new Padding(
                  // 平移 translate
                  padding: EdgeInsets.only(left: 20, top: 20),
                  child: new Container(
                    decoration: new BoxDecoration(
                        gradient: LinearGradient(
                            colors: [Colors.black54, Colors.blue]),
                        borderRadius: BorderRadius.circular(2)),
                    child: new Padding(
                        padding: EdgeInsets.all(10),
                        child: new Transform.translate(
                          offset: Offset(-20, 5),
                          child: new Text('Apartment for rent!'),
                        )),
                  )),
              new Padding(
                // 旋转 rotate
                padding: EdgeInsets.only(left: 20, top: 100),
                child: new DecoratedBox(
                  decoration: new BoxDecoration(color: Colors.red),
                  child: Transform.rotate(
                    angle: math.pi / 2,
                    child: new Text('Apartment for rent!'),
                  ),
                ),
              ),
              new Padding( // 缩放 scale
                padding: EdgeInsets.only(left: 100, top: 100),
                child: new Transform.scale(
                  scale: 1.5, // 放大1.5倍
                  child: new Text(
                    'Apartment for rent!',
                    style: TextStyle(
                        backgroundColor: Colors.red, color: Colors.white),
                  ),
                ),
              )
            ],
          ),
        ));
  }
}
